// 此文件封装 分类数据 的业务逻辑代码
import { getTopCategoryAPI } from '@/apis/category'
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
export function useCategory() {
  // 面包屑 分类数据 -- 移到专门封装获取 category 的地方
const route = useRoute()
const categoryData = ref([])

// 解决路由缓存 -- 参数默认是当前页的 路由 id -- 当路由发生变化时, 参数就是 新路由的参数 id
const getCategory = async (id = route.params.id) => {
  const res = await getTopCategoryAPI(id)
  categoryData.value = res.result
}
onMounted(() => getCategory())
// 解决路由缓存方法二  onBeforeRouteUpdate()方法可以监听路由发生变化 参数 to是要去的路由
// 目标: 当路由参数发生变化的时候, 可以把分类数据接口重新发送
onBeforeRouteUpdate(to => {
  // 需要使用最新的路由参数请求最新的分类数据  to.params.id 最新的参数 id
  getCategory(to.params.id)
})
// 记得导出
  return {
    categoryData
  }
}